<template>
  <div class="reChargeWrapper">
    <div class="top">
      <div class="item {{leftClass}}" @click="showRecharge">充值</div>
      <div class="divide-line"></div>
      <div class="item {{rightClass}}" @click="showCard">充值卡</div>
    </div>

    <div class="rechargePage" v-show="leftStatus">
      <div class="balance-box">
        <img src="http://static.52letsgo.cn/zz/wechatimg/ic_money.png" alt="">
        <span>帐户余额:</span>
        <span class="money">5.3元</span>
      </div>
      <div class="recharge-box">
        <div class="title">充值金额</div>
        <div class="right">
          <group>
            <x-input title="￥" placeholder="充值金额必须大于1元"></x-input>
          </group>
        </div>
      </div>

      <div class="recharge-btn">
         <x-button type="warn">立即充值</x-button>
      </div>
    </div>

    <div class="cardPage" v-show="rightStatus">
      <group>
        <x-input title="卡号" placeholder="请输入16位卡号"></x-input>
      </group>
      <group>
        <x-input title="卡密" placeholder="请输入6位卡密"></x-input>
      </group>

      <div class="recharge-btn">
         <x-button type="warn">确认充值</x-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { XInput, Group, XButton } from './../../components'

  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  export default {
    data () {
      return {
        leftStatus: true,
        rightStatus: false,
        leftClass: 'active',
        rightClass: ''
      }
    },
    created: function () {
      Global.closeLoading()
    },
    components: {
      XInput,
      Group,
      XButton
    },
    methods: {
      showCard () {
        this.leftStatus = false
        this.leftClass = ''
        this.rightStatus = true
        this.rightClass = 'active'
      },
      showRecharge () {
        this.leftStatus = true
        this.leftClass = 'active'
        this.rightStatus = false
        this.rightClass = ''
      }
    }
  }
</script>
<style lang="less">
  @import './recharge.less';
</style>